<template>
	<view class="u-content">

		<view v-if="data" class="">
			<view class="showtitle">
				<view class="title">
					<text> {{data.title }}</text>
				</view>
				<!-- <view class="subtitle">
				 <view><text>发布：{{ data.addtime }}</text></view>
				 <view class="more"><text>  阅读{{data.onclick }}次</text></view>
			 </view> -->
			</view>
			<view class="container">
				<up-parse :content="data.content"></up-parse>
			</view>

		</view>

		<up-empty v-if="(isloading && !data)" mode="shop" text="暂无数据" icon="/static/empty/nodata.png"> </up-empty>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		getSinglePageDetails
	} from '/common/api.js';

	const props = defineProps({
		id: {
			type: [String, Number],
			default: undefined
		}
	})
	const isloading = ref(false)
	const data = ref(null);

	function fetchData() {
		getSinglePageDetails(props.id).then(ret => {
			isloading.value = true;
			// console.log('newsdetail', ret)
			if (ret) data.value = ret;
		}, fail=>{
			isloading.value = true;
		})
	}
	onMounted(() => {
		fetchData();
		// console.log('onMounted', props.id)
	})
</script>

<style lang="scss">
	.u-content {
		padding: 30rpx;
		font-size: 32rpx;
		color: $u-content-color;
		line-height: 1.6;
		background-color: #fff;
		min-height: calc(100vh - 170px);
	}

	.container {
		margin-top: 30rpx;
	}

	.showtitle {
		border-bottom: #f1f1f1 1rpx solid;
		padding-bottom: 20rpx;

	}

	.showtitle .title {
		line-height: 60rpx;
		padding-bottom: 20rpx;
		font-size: 48rpx;
		font-weight: bold;
	}

	.subtitle {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.subtitle text {
		font-size: 28rpx;
		color: #999;
	}

	.htmltext {

		font-size: 32rpx;

	}

	.subtitle .more {}

	.dfbar {
		position: fixed;
		left: 0;
		bottom: 0px;
		height: 90rpx;
		width: 100%;
		z-index: 2;
	}

	.dfbar .bd {
		position: relative;
		height: 90rpx;
	}

	.dfbar .mask {
		background-color: #000000;
		opacity: .7;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 90rpx;
		z-index: -1;
	}

	.dfbar .flexbb {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
	}

	.dfbar .fd1 {
		width: 240rpx;
		background: #F87271;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		margin-left: 50rpx;
	}

	.dfbar .fd2 {
		width: 240rpx;
		background: #F87271;
		border-radius: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		margin-right: 50rpx;
	}
</style>